<template>
	<view class="verificationRecordPage">
		<view class="month flex-between">
			<view class="selectTime flex-align-center">

				<view class="tab " v-for="(item, index) in orderStatusArr" :key="index">
					<view :class="[currentIndex == index ? 'active ' : ''] " @click="switchTimeTab(index)">
						{{ item.value }}
					</view>
				</view>
			</view>
			<!-- <picker mode="date" :value="date" :fields="currentTimeFn(currentTime)" :start="startDate" :end="endDate"
				@change="bindDateChange">
				<view class="flex-align-center-justify-start  color6">
					{{ yeartime }}
					<text>-</text>
					{{ monthtime }}
					<uni-icons type="down" color='#333' size="16"></uni-icons>
				
				</view>

			</picker> -->
		</view>
		<mescroll-body ref="mescrollRef" :height="windowHeight+'rpx'" @init="mescrollInit" @down="downCallback"
			@up="upCallback" :up="upOption" :down="downOption">
			<block v-for="(item,index) in list" :key="index">
				<view class="verificationRecordList margin-top_30rpx" v-if="currentIndex==0">
					<view class="flex-between  font-weight_bold margin-bottom_30rpx">
						<view class="">
							{{orderStatusFn(item.mode_type)}}
						</view>
						<view v-if='item.type==1' style="color:#1890ff">
							+{{(item.num)}}
						</view>
						<view v-if='item.type==2' style="color:red">
							-{{(item.num)}}
						</view>
					</view>
					<view class="flex-between   ">
						<view class="">
							<text>{{item.create_time}}</text>
						</view>
						<view class="">
							<text></text>
						</view>
					</view>
				</view>

				<view class="verificationRecordList margin-top_30rpx" v-if="currentIndex==1">

					<view class="recordsList">

						<view class="flex-between">
							<view class="">

								<view class="flex-columns" style="margin-left: 20rpx;height: 150rpx;">
									<text
										style="font-size: 22rpx;font-weight: 400;">支付类型：{{payTypeFn(item.pay_type )}}</text>
									<text
										style="font-size: 22rpx;font-weight: 400;">余额操作：{{operateTypeFn(item.operate_type)}}</text>

									<text
										style="font-size: 22rpx;font-weight: 400;">支付方式：{{payFn(item.pay_method)}}</text>
								</view>

							</view>
							<view class="flex-column-end " style="height: 150rpx;">
								<text class="font-weight_bold "
									style=" font-size: 32rpx; color: red;">{{item.type==1?'+':'-'}}{{item.amount}}</text>
									<view v-if="item.type==1" class="">赠送金额：<text class="font-weight_bold "
										style=" font-size: 32rpx; color: red;">{{item.give_amount}}</text></view>
								<text style="color: rgb(153, 153, 153);;">{{item.create_time}}</text>
							</view>
						
						</view>


					</view>
					<!-- <view class="flex-between  font-weight_bold margin-bottom_30rpx">
						<view class="">
							{{operateTypeFn(item.operate_type)}}
						</view>
						<view v-if='item.type==1' style="color:#1890ff">
							+{{(item.amount)}}
						</view>
						<view v-if='item.type==2' style="color:red">
							-{{(item.amount)}}
						</view>
					</view>
					<view class="flex-between   ">
						<view class="">
							<text>{{item.create_time}}</text>
						</view>
						<view class="">
							<text></text>
						</view>
					</view> -->
				</view>
				<view class="verificationRecordList margin-top_30rpx" v-if="currentIndex==2">
					<view class="flex-between  font-weight_bold margin-bottom_30rpx">
						<view class="">
							{{commissionStatusFn(item.type)}}
						</view>
						<view class="">
						    {{(item.type==1||item.type==2||item.type==4)?'+':'-'}} {{item.amount}}
						</view>
					</view>
					<view class="flex-between   ">
						<view class="">
							<text>{{item.create_time}}</text>
						</view>
						<view class="">
							<text>{{item.level==1?"直推粉丝":'间推粉丝'}}</text>
						</view>
					</view>
				</view>
			</block>
		</mescroll-body>
	</view>
</template>

<script>
	export default {
		components: {

		},
		data() {
			const currentDate = this.getDate({
				format: true
			});
			return {

				tabIndex: 4,
				navIndex: 0,
				currentIndex: 0,
				tabList: [{
					name: '已使用',
					id: '1' //null
				}, {
					name: '已过期',
					id: '2' //null
				}, ],
				currentTime: '2',
				yeartime: currentDate.split('-')[0],
				//选择的月份
				monthtime: currentDate.split('-')[1],
				//选择的天数
				daytime: currentDate.split('-')[2],
				orderStatusArr: [{
						value: '积分'
					},

					{
						value: '余额'
					},
					{
						value: '佣金'
					},

				],
				date: null,
				downOption: {
					auto: true
				},
				// 上拉配置项
				upOption: {
					auto: true
				},
				token: uni.getStorageSync('login').token,
				windowHeight: '',
				list: [],
				form: {
					id: ''
				}

			}
		},
		onLoad(options) {
			console.log(options)
			if (options.id) {
				this.form.id = options.id


			}
			uni.getSystemInfo({
				success: (res) => {
					this.windowHeight = res.windowHeight * 2 - 800;
				}
			});
		},
		onShow() {
			this.$nextTick(() => {
				this.mescroll?.resetUpScroll();
			})

		},

		methods: {
			async upCallback(scroll) {
				const userapi = this.currentIndex == 0 ? this.$api.userIntegral : this.currentIndex == 1 ? this.$api
					.balance : this.$api.userCommission
				const result = await this.$http.post({
					url: userapi,
					data: {
						...this.form,
						page: scroll.num,
						limit: 10

					},
					headers: {
						'Authorization': `Bearer ${this.token}`
					}

				})
				if (result.code == 0) {
					console.log('地址管理列表', result);
					this.mescroll.endByPage(result.data.list.length, this.$sun.pagingSum(result.data.count, 10));
					if (scroll.num == 1) this.list = [];
					this.list = this.list.concat(result.data.list);
					console.log('this.list', this.list, this.list.length);
				}
			},
			getChange(index) {
				console.log(index)
				this.navIndex = index
			},
			switchTimeTab(index) {

				this.currentIndex = index;
				this.mescroll?.resetUpScroll();

			},
			// 日期获取
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();
				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;
				day = day > 9 ? day : '0' + day;

				return `${year}-${month}-${day}`;

			},

			bindDateChange(e) {


				this.createTime = e.detail.value
				this.date = e.target.value;
				/* 在上面声明变量，split是用来截取字段*/
				this.yeartime = this.date.split('-')[0];
				this.monthtime = this.date.split('-')[1];
				this.daytime = this.date.split('-')[2];


			},
		},
		computed: {
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			},
			currentTimeFn() {
				return function(currentIndex) {
					if (currentIndex == '1') {
						// 日
						return 'day';

					} else if (currentIndex == '2') {
						// 月
						return 'month';
					} else if (currentIndex == '3') {
						// 年
						return 'year';
					}
				};
			},
			// 订单状态
			orderStatusFn: function() {
				return function(status) {

					let orderStatus = '';
					// status订单状态（0.待付款 1.待接单 2.已接单 3.服务中 4.已完成 5.已取消/退款)
					orderStatus =
						status == 1 ? '购买商品积分抵扣' : status == 2 ? '签到' : status == 3 ? '积分提现' : status == 4 ?
						'购买商品获得积分' :
						status == 5 ? '购买套餐卡获取积分' : status == 6 ? '手动' : status == 7 ? '商品退款' : '收银台消费';
					return orderStatus;
				};
			},
			payStatusTypeFn: function() {
				return function(status) {

					let orderStatus = '';
					// status订单状态（0.待付款 1.待接单 2.已接单 3.服务中 4.已完成 5.已取消/退款)
					orderStatus =
						status == 1 ? '待支付' : status == 2 ? '支付成功' : '已完成'
					return orderStatus;
				};
			},

			payTypeFn: function() {
				return function(status) {
					let orderStatus = '';
					// status订单状态（0.待付款 1.待接单 2.已接单 3.服务中 4.已完成 5.已取消/退款)
					orderStatus =
						status == 0 ?
						'线上' :
						status == 1 ?
						'线上扫码' :
						status == 2 ?
						'线下' :
						status == 3 ?
						'在线充值' :
						'余额'
					return orderStatus;
				};
			},
			payFn: function() {
				return function(status) {
					let orderStatus = '';
					// status订单状态（0.待付款 1.待接单 2.已接单 3.服务中 4.已完成 5.已取消/退款)
					orderStatus =
						status == 0 ?
						'微信' :
						status == 1 ?
						'微信' :
						status == 2 ?
						'支付宝' :
						status == 3 ?
						'现金' :
						status == 4 ?
						'余额' :
						'pos机';
					return orderStatus;
				};
			},
			changeFn: function() {
				return function(status) {
					let orderStatus = '';
					// status订单状态（0.待付款 1.待接单 2.已接单 3.服务中 4.已完成 5.已取消/退款)
					orderStatus =
						status == 0 ?
						'支付' :
						status == 1 ?
						'支付' :
						status == 2 ?
						'提现' :
						status == 3 ?
						'退款' :
						'手动';
					return orderStatus;
				};
			},
			operateTypeFn: function() {
				return function(status) {
					let orderStatus = '';
					// status订单状态（0.待付款 1.待接单 2.已接单 3.服务中 4.已完成 5.已取消/退款)
					// orderStatus =
					//   status == 1 ? '余额充值' : status == 2 ? '购买商品' : '购买套餐 ';

					orderStatus =
						status == 1 ? '微信在线充值余额' : status == 2 ? '微信线下扫码充值' : status == 3 ? '支付宝线下充值余额' : status ==
						4 ?
						'现金充值余额' : status == 5 ? 'pos机充值余额' : status == 6 ? '微信在线扫码充值余额' : status == 7 ?
						'支付宝在线扫码充值余额' :
						status == 8 ? '微信在线购买商品' : status == 9 ? '余额购买商品' : status == 10 ? '微信在线购买套餐卡' : status ==
						11 ? '余额购买套餐卡' :
						status == 12 ? '微信线下购买套餐卡' : status == 13 ? '支付宝线下购买套餐卡' : status == 14 ? '现金购买套餐卡' :
						status == 15 ? 'pos购买套餐卡' :
						status == 16 ? '微信在线扫码购买套餐卡' : status == 17 ? '支付宝在线扫码购买套餐卡' : status == 18 ?
						'微信在线购买商品退款' : status == 19 ? '余额购买商品退款' :
						status == 20 ? '手动操作余额' : status == 21 ? '余额线下消费' : status == 22 ? '微信线下消费' : status ==
						23 ? '支付宝线下消费' : status == 24 ? '现金线下消费' : status == 25 ?
						'pos线下消费' : status == 26 ? '微信在线消费' : '支付宝在线消费';
					return orderStatus;
				};
			},
			commissionStatusFn: function() {
				return function(status) {

					let orderStatus = '';
					// status订单状态（0.待付款 1.待接单 2.已接单 3.服务中 4.已完成 5.已取消/退款)
					orderStatus =
						status == 1 ? '商城购买商品' : status == 2 ? '购买套餐卡' : status == 3 ? '提现' : status == 4 ?
						'手动添加' : '手动扣除';

					return orderStatus;
				};
			},


		},
	}
</script>

<style lang="less" scoped>
	.verificationRecordPage {
		.selectTime {


			.tab {

				list-style-type: none;
				margin-right: 20rpx;
				display: block;
				width: 106rpx;
				height: 44rpx;
				line-height: 44rpx;

				border: 1px solid rgb(239, 239, 239);
				text-align: center;
				background: rgb(255, 255, 255);
				color: rgb(153, 153, 153);
				border-radius: 10rpx;
			}

			.active {
				border-radius: 10rpx;
				width: 106rpx;
				height: 44rpx;

				background: rgb(255, 0, 0);
				color: rgb(255, 255, 255);
				;
				text-align: center;
				line-height: 44rpx;
			}

			.orderStatus {
				width: 90px;
				height: 50rpx;
				text-align: center;
				line-height: 50rpx;
				font-weight: 700;

			}




		}

		padding: 24rpx;

		.verificationRecordList {
			padding: 24rpx;

			border-radius: 10rpx;

			background: rgb(255, 255, 255);
		}
	}

	page {
		background: #f6f6f6;
	}

	.revenueRecordsNav {
		width: 375px;
		height: 50px;
		background: rgb(255, 255, 255);

		.pointHead {
			padding: 50rpx 20rpx;

			.month {
				width: 85px;
				height: 28px;
				border-radius: 200rpx;
				background: #E7E7E7;
				color: #fff;
				text-align: center;
				line-height: 28px;
				color: #333;
			}

			.selectTime {

				.tab {
					margin-left: 20rpx;
					list-style-type: none;
					display: block;
					width: 108rpx;
					height: 50rpx;
					line-height: 50rpx;
					text-align: center;
					background: rgb(235, 234, 234);

				}

				.active {
					width: 108rpx;
					height: 50rpx;

					background: rgb(232, 202, 148);
					;
					color: rgb(122, 85, 32);
					text-align: center;
					line-height: 50rpx;
				}

				.orderStatus {
					width: 90px;
					height: 50rpx;
					text-align: center;
					line-height: 50rpx;
					font-weight: 700;

				}




			}

		}

		.recordsContainer {
			padding: 40rpx 20rpx;
			background-color: #fff;

			.recordsList {
				padding-bottom: 30rpx;
				margin-top: 30rpx;
				border-bottom: 1px solid rgb(236, 235, 235);

				.avatar {
					width: 44px;
					height: 44px;
				}
			}
		}

	}
</style>